<template>
  <div class="Processed">
    <div class="title">事件统计</div>
    <el-card class="box-card">
      年份：
      <el-select v-model="query.year" placeholder="请选择" size="small">
        <el-option
          v-for="item in yearList"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      月份：
      <el-select v-model="query.month" placeholder="请选择" size="small">
        <el-option label="1" value="1"> </el-option>
        <el-option label="2" value="2"> </el-option>
        <el-option label="3" value="3"> </el-option>
        <el-option label="4" value="4"> </el-option>
        <el-option label="5" value="5"> </el-option>
        <el-option label="6" value="6"> </el-option>
        <el-option label="7" value="7"> </el-option>
        <el-option label="8" value="8"> </el-option>
        <el-option label="9" value="9"> </el-option>
        <el-option label="10" value="10"> </el-option>
        <el-option label="11" value="11"> </el-option>
        <el-option label="12" value="12"> </el-option>
      </el-select>
      <el-button size="small" @click="getTable" style="margin-left: 5px"
        >搜索</el-button
      >
      <el-button size="small" @click="upLoadTable">导出</el-button>
    </el-card>
    <el-row>
      <el-col :span="23">
        <el-table
          :data="tableData"
          style="width: 100%; margin: 10px"
          height="600"
          :header-cell-style="{
            background: 'rgb(246,250,253)',
            color: '#000000',
          }"
          border
        >
          <el-table-column prop="type" label="事件类型" />
          <el-table-column prop="name" label="不良事件名称" />
          <el-table-column prop="eventNo" label="事件编号" />
          <el-table-column prop="grade" label="事件分类分级" />
          <el-table-column prop="occTime" label="事件发生日期" />
          <el-table-column prop="reportTime" label="事件上报时间" />
          <el-table-column prop="dept" label="上报科室" />
          <el-table-column prop="createUser" label="上报人" />
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="to_info(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 弹层 -->
    <el-dialog
      class="new dialog3"
      :visible.sync="dialogVisible_b"
      width="50%"
      :before-close="handleClose_b"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="print" id="print">
        <div class="title_dy">{{ print_data.orgName }}</div>
        <el-row>
          <el-col :span="9">
            <div
              class="title_dy"
              style="font-size: 14px; text-align: left; margin-left: 20px"
            >
              事件编号：
              <span class="border">{{ eventno }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="title_dy" style="font-size: 20px">
              （{{ print_data.typeName }}）
            </div>
          </el-col>
          <el-col :span="9">
            <div
              class="title_dy"
              style="font-size: 14px; text-align: right; margin-right: 20px"
            >
              时间：<span class="border">{{ time | time }}</span>
            </div>
          </el-col>
        </el-row>
        <div v-for="(item, index) in jsonP" :key="index">
          <el-card
            class="box-card"
            style="margin-top: 0px"
            v-if="jsonP[index].groupName !== '鱼骨图'"
          >
            <template>
              <div slot="header" class="clearfix">
                <span class="title-text"
                  ><i class="el-icon-document-remove"></i
                  >{{ jsonP[index].groupName }}</span
                >
              </div>
              <div class="text item">
                <div>
                  <div
                    style="width: 100%"
                    v-for="(kom, index) in item.groupList"
                    :key="index"
                  >
                    <div class="ipt_div_DY" v-if="kom.inputtype !== 5">
                      <span
                        class="ipt-text red dis_DY"
                        v-if="kom.isnull == true"
                      >
                        {{ kom.name }}：
                      </span>
                      <span class="ipt-text dis_DY" v-else
                        >{{ kom.name }}：</span
                      >
                      <span class="value" v-if="kom.inputtype == 1">{{
                        kom.value
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 2">{{
                        kom.selectValue
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 3">{{
                        kom.checkboxValue
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 4">{{
                        kom.radioValue
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 6">{{
                        kom.date
                      }}</span>
                      <span class="value" v-if="kom.inputtype == 8">{{
                        kom.datetime
                      }}</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    style="width: 100%"
                    v-for="(kom, indx) in item.groupList"
                    :key="indx"
                  >
                    <div class="ipt_divw" v-if="kom.inputtype == 5">
                      <span
                        class="ipt-text red dis_DY"
                        v-if="kom.isnull == true"
                      >
                        {{ kom.name }}：
                      </span>
                      <span class="ipt-text dis_DY" v-else
                        >{{ kom.name }}：</span
                      >
                      <div style="min-height: 150px" v-if="kom.inputtype == 5">
                        {{ kom.textareaValue }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-card>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_b = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      tableData: [],
      科室: [],
      事件等级: [],
      query: {
        year: "",
        month: "",
      },
      total: 0,
      事件状态: [],
      nowOrd: baseUrl.ord,
      yearList: [],
      dialogVisible_b: false,
      eventno: "",
      time: "",
      print_data: {},
      jsonP: "",
      jsonP: "",
    };
  },
  mounted() {
    this.getYearList();
    // this.getTable();
  },
  methods: {
    getYearList() {
      // 获取当前年份
      var currentYear = new Date().getFullYear();
      // 创建一个数组来存储近10年的年份
      var pastTenYears = [];
      // 循环获取近10年的年份
      for (let i = 0; i < 10; i++) {
        var year = currentYear - i;
        pastTenYears.push(year);
      }
      this.yearList = pastTenYears;
    },
    getTable() {
      if (this.query.year == "" || this.query.month == "") {
        this.$notify.error({
          title: "提示",
          message: "请完整选择查询条件！",
        });
        return;
      }
      var body = this.query;
      this.$post("/Aers/Statistics/GetMonthYl", body).then((res) => {
        this.tableData = res.data;
      });
    },
    upLoadTable() {
      var body = this.query;
      this.$post("/Aers/Statistics/ExportMonthYl", body).then((res) => {
        window.open(baseUrl.baseIP + res.data.urlPath);
      });
    },
    to_info(row) {
      this.eventno = row.eventNo;
      this.$get("/Aers/ReportEvent/GetItemPrint?id=" + row.id).then((res) => {
        this.time = res.data.createDate;
        this.print_data = res.data;
        this.jsonP = JSON.parse(res.data.json).list;
        this.dialogVisible_b = true;
      });
    },
  },
};
</script>
<style scoped lang='scss'>
body {
  background-color: #f8f9fa;
}
.box-card {
  margin: 5px;
}
.el-card ::v-deep .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
.title {
  background-color: rgb(233, 242, 255);
  line-height: 45px;
  font-size: 18px;
  font-weight: 700;
  padding: 0 10px;
}
::v-deep .el-cascader__tags {
  flex-wrap: initial;
}
::v-deep .el-cascader__tags .el-tag {
  max-width: 75%;
}
.title {
  font-size: 18px;
  font-weight: 700;
  color: rgb(116, 182, 237);
}
.Table_height {
  height: 60vh;
  overflow: auto;
}
::v-deep .el-date-editor .el-range-separator {
  padding: 0 !important;
}
::v-deep .el-table .warning-row {
  background: rgb(197, 224, 119) !important;
  font-weight: 700;
}

.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table__header-wrapper {
  position: fixed;
  // top: 80px;
  z-index: 99;
}
::v-deep .el-table__body-wrapper {
  margin-top: 30px;
}
// 打印
.topDiv {
  height: 60px;
  width: 100%;
  line-height: 60px;
  position: fixed;
  top: 46px;
  z-index: 999;
  background: #e8f2fe;
}
.title-text {
  color: #1e8bc2;
  font-weight: bold;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.el-card .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 20px;
}
.card-ipt {
  width: 200px;
}
.red {
  font-weight: 600;
  color: #ff0000;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.ipt-area {
  margin-top: 20px;
}
.mt20 {
  margin-top: 20px;
}
.border {
  border-bottom: 1px solid #ccc;
}
.ipt_div {
  width: 50%;
  /* min-height: 50px; */
  margin-bottom: 10px;
  float: left;
  /* margin-bottom: -10px; */
}
.ipt_div_DY {
  width: 33%;
  /* min-height: 50px; */
  margin-bottom: 10px;
  float: left;
}
.ipt_divw {
  width: 100%;
  /* min-height: 80px; */
  float: left;
  margin-bottom: 3px;
}
.ipt_divw span {
  width: 100%;
  height: 30px;
  display: block;
}
.dis {
  width: 180px;
  display: block;
  float: left;
}
.dis_DY {
  display: block;
  float: left;
}
.yuguName {
  width: 300px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
}
.wrap:nth-child(2) .divwrap .yuguName {
  width: 300px;
  height: 660px;
  line-height: 660px;
  border-bottom: 1px solid #ccc;
}

.yugudiv {
  height: 60px;
  white-space: nowrap;
  overflow: hidden;
}
.yuguspan {
  width: 100px;
  /* height: 60px; */
  /* line-height: 60px; */
  border-bottom: 1px solid #ccc;
}
.yugudiv2 {
  height: 60px;
  border-bottom: 1px solid #ccc;
}
.divwrap .yugudiv:nth-child(2) {
  height: 120px !important;
}
.divwrap .yugudiv:nth-child(2) .yuguspan {
  width: 100px;
  /* height: 120px !important; */
  /* line-height: 120px !important; */
  border-bottom: 1px solid #ccc;
}
.divwrap .yugudiv:nth-child(2) .yugudiv2 {
  height: 120px !important;
  border-bottom: 1px solid #ccc !important;
}
.yugudivnull {
  width: 100%;
  float: left;
  border-bottom: 1px solid #ccc;
  height: 80px;
}
.yugudivnullspan {
  display: block;
  width: 300px;
  height: 80px;
  line-height: 80px;
}
.box-warp {
  float: left;
}
.box-warp > a {
  display: flex;
  color: #333;
  margin-left: 10px;
}
.p {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
}
.checked {
  color: red !important;
}
::v-deep .el-input.is-disabled .el-input__inner {
  color: #000 !important;
}
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #000;
}
::v-deep .el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  border-color: #000;
}
.value {
  display: inline-block;
  border-bottom: 1px solid #000;
  min-width: 60px;
}
/* 打印 */
.title_dy {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
.border {
  border-bottom: 1px solid #000;
}
</style>